<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <!-- bidirectional data binding（双向数据绑定） -->
      <codemirror v-model="code" :options="cmOptions"></codemirror>
    </div>
  </div>
</template>
<script>

// language js
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/theme/monokai.css'
export default {
  name: 'Name',
  data () {
    return {
      code: `
    <div>fdafasf</div>
    <div>fdafasf</div>
    <div>fdafasf</div>
    <style>
    body{
      width:100px;
    }
    </style>
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'text/html',
        theme: 'default',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
